<template>
    <view class="container">
        <!-- 商品分类 -->
        <view :class="[yfhType == 1 ? 'Fhshangpinfenlei_box' : 'shangpinfenlei_box']">
            <view style="width: 100%;border-bottom: 1rpx solid rgba(153,153,153,0.2);">
                <text class="shangpinfeilei_text">商品分类：</text>
                <text class="shangpinfeilei_name_text">{{ detail.title }}</text>
            </view>
            <view v-if="detail.send_order">
                <text class="shangpinfeilei_text">订单状态：</text>
                <text class="shangpinfeilei_name_text">{{ detail.send_order.status || '' }}</text>
            </view>
        </view>
        <!-- 详情盒子class="boxDetail" -->
        <view :class="[yfhType == 1 ? 'faHuoDetail' : 'boxDetail']" style="padding-top: 26rpx;">
            <view class="shangsuoanniu_box" @click="shangsuo" v-if="ydhType == 0">
                <image src="https://mh.qingfentool.vip/upload/image/20230408/da39942ce9ef4548c0d6bf663c43a0e0.png"
                    mode="scaleToFill" />
            </view>
            <view class="shangsuoanniu_box" v-if="ydhType == 1">

            </view>
            <view class="top_box">
                <view class="left_box">
                    <image :src="detail.prize_icon" mode="scaleToFill" />
                </view>
                <view class="right_box">
                    <view class="top_text_box">{{ detail.prize_name }}</view>
                    <view class="zuofei_box" v-if="ydhType == 3">已作废</view>
                    <view class="bot_text_box">
                        <text class="jiazhi_txt">价值{{ detail.price }}/大王币{{ detail.recovery_price }}</text>
                        <text class="right_txt">X{{ detail.num }}</text>
                    </view>
                </view>
            </view>
            <!-- <view class="yunfei_big_box" v-if="yfhType == 1">
                <view class="yunfei_sm_box">
                    <text class="left_box">运费：￥20.00</text>
                    <text class="right_box">实付款：￥0.00</text>
                </view>
            </view> -->
            <!-- <view class="two_box">
                <view class="sm_box">
                    放心购大王赏商城正品保障
                </view>
            </view> -->
            <view class="bottom_box">
                <text class="dingdanbainhao_name">订单编号：</text>
                <text class="dingdanbainhao_txt">{{ detail.order_id }}</text>
            </view>
            <view class="bottom_box">
                <text class="dingdanbainhao_name">获得时间：</text>
                <text class="dingdanbainhao_txt">{{ detail.create_time | formatDate('-') }}</text>
            </view>
            <template v-if="yfhType == 1 && detail.send_order">
                <view class="bottom_box">
                    <text class="dingdanbainhao_name">提货时间：</text>
                    <text class="dingdanbainhao_txt">{{ detail.send_order.create_time | formatDate('-') }}</text>
                </view>
                <!-- <view class="bottom_box">
                    <text class="dingdanbainhao_name">优惠减扣：</text>
                    <text class="dingdanbainhao_txt">{{ detail.create_time }}</text>
                </view> -->
                <template>
                    <view class="bottom_box" v-if="detail.send_order.status == '已完成'">
                        <text class="dingdanbainhao_name">订单完成时间：</text>
                        <text class="dingdanbainhao_txt">{{ detail.send_order.send_time | formatDate('-') }}</text>
                    </view>
                    <view v-else>
                    </view>
                </template>
            </template>

            <template v-else>
                <view class="bottom_box" v-if="ydhType == 1">
                    <text class="dingdanbainhao_name">拒提时间：</text>
                    <text class="dingdanbainhao_txt">{{ detail.exchange_time | formatDate('-') }}</text>
                </view>
                <view class="bottom_box" v-else-if="ydhType == 2">
                    <text class="dingdanbainhao_name">赠送时间：</text>
                    <text class="dingdanbainhao_txt">{{ detail.give_time | formatDate('-') }}</text>
                </view>
                <view class="bottom_box" v-else-if="ydhType == 3 && detail.back_order">
                    <text class="dingdanbainhao_name">作废时间：</text>
                    <text class="dingdanbainhao_txt">{{ detail.back_order.create_time | formatDate('-') || '' }}</text>
                </view>
                <!-- <view class="bottom_box" v-else>
                    <text class="dingdanbainhao_name">过期时间：</text>
                    <text class="dingdanbainhao_txt">{{ detail.expire_time }}</text>
                </view> -->
            </template>
        </view>
        <!-- 反悔获得详情 -->
        <template v-if="ydhType == 3 && detail.back_order">
            <view class="boxDetail">
                <view class="fanhuihd_box">
                    <text class="left_box">反悔获得</text>
                    <text class="right_box">可在待处理列表查看</text>
                </view>
                <view class="top_box">
                    <view class="left_box">
                        <image :src="detail.back_order.prize_icon" mode="scaleToFill" />
                    </view>
                    <view class="right_box">
                        <view class="top_text_box">{{ detail.back_order.prize_name }}</view>
                        <view class="bot_text_box">
                            <text class="jiazhi_txt">价值{{ detail.back_order.price }}/大王币{{ detail.back_order.price }}</text>
                            <text class="right_txt">X{{ detail.back_order.num }}</text>
                        </view>
                    </view>
                </view>
                <view class="bottom_box">
                    <text class="dingdanbainhao_name">订单编号：</text>
                    <text class="dingdanbainhao_txt">{{ detail.back_order.order_id }}</text>
                </view>
                <view class="bottom_box">
                    <text class="dingdanbainhao_name">获得时间：</text>
                    <text class="dingdanbainhao_txt">{{ detail.back_order.create_time | formatDate('-') }}</text>
                </view>
                <template>
                    <view class="bottom_box" v-if="isDuhuan != 2">
                        <text class="dingdanbainhao_name">过期时间：</text>
                        <text class="dingdanbainhao_txt">{{ detail.back_order.expire_time }}</text>
                    </view>
                </template>
            </view>
        </template>
        <!-- 收件信息 -->
        <template v-if="yfhType == 1">
            <view class="boxDetail" style="height:300rpx;">
                <view class="fanhuihd_box">
                    <text class="left_box">收件信息</text>
                </view>
                <view class="bottom_box">
                    <text class="dingdanbainhao_name">收件人：</text>
                    <text class="dingdanbainhao_txt">{{ detail.send_order.name }}</text>
                </view>
                <view class="bottom_box">
                    <text class="dingdanbainhao_name">联系电话：</text>
                    <text class="dingdanbainhao_txt">{{ detail.send_order.mobile }}</text>
                </view>
                <template>
                    <view class="bottom1_box">
                        <view class="dingdanbainhao_name">收件地址：</view>
                        <view class="shouhuodizhi_box">{{ detail.send_order.address }} </view>

                    </view>
                </template>
            </view>
        </template>

        <!-- 商品分类 -->
        <template v-if="isDuhuan == 0">
            <view class="longzhuduihuan_box" style="margin-top:22rpx;">
                <text class="shangpinfeilei_text" style="font-size: 24rpx;" v-if="ydhType == 1">拒提返回大王币：</text>
                <text class="shangpinfeilei_text" style="font-size: 24rpx;" v-else>拒提返回大王币：</text>
                <text class="shangpinfeilei_name_text">{{ (detail.recovery_price * detail.num).toFixed(2) }}大王币</text>
            </view>
        </template>
        <template v-else></template>
        <!-- 受赠信息 -->
        <template v-if="titleType == '获赠商品'">
            <view class="shouzeng_box">
                <view class="one_box">
                    <text style="font-size: 28rpx;font-weight: 500;color: #fff;">赠送人：</text>
                    <text style="font-size: 28rpx;font-weight: 500;color: #fff;">{{ detail.u_name || '' }}</text>
                </view>
                <view class="two_box">
                    <view style=" width: 15%;font-size: 26rpx;font-weight: 500;color: #fff;">备&emsp;注：</view>
                    <view style=" width: 75%;font-size: 28rpx;font-weight: 500;color: #fff;">{{ detail.remark || '' }}
                    </view>
                </view>
            </view>
        </template>
        <template v-else-if="shouzengType == '获赠商品'">
            <view class="shouzeng_box">
                <view class="shouzengren_box">
                    <view
                        style="height: 54rpx;line-height:54rpx;font-size: 28rpx;font-weight: 500;color: #fff;padding-left: 22rpx;">
                        受赠人：</view>
                    <view class="touxiang_box">
                        <view class="pic_box">
                            <image :src="detail.u_avatar" mode="scaleToFill" />
                        </view>
                        <view class="pic_lef_text">
                            <view class="pic_lef_top_txt">{{ detail.u_name || '' }}</view>
                            <view class="pic_lef_bot_txt">ID：{{ detail.form_give_user_id || '' }}</view>
                        </view>
                    </view>
                </view>
                <view class="two_box">
                    <view style=" width: 15%;font-size: 26rpx;font-weight: 500;color: #fff;">备&emsp;注：</view>
                    <view style=" width: 75%;font-size: 28rpx;font-weight: 500;color: #fff;">{{ detail.remark || '' }}
                    </view>
                </view>
            </view>
        </template>
        <template v-else-if="ydhType == 2">
            <view class="shouzeng_box">
                <view class="shouzengren_box">
                    <view
                        style="height: 54rpx;line-height:54rpx;font-size: 28rpx;font-weight: 500;color: #fff;padding-left: 22rpx;">
                        受赠人：</view>
                    <view class="touxiang_box">
                        <view class="pic_box">
                            <image :src="detail.u_avatar" mode="scaleToFill" />
                        </view>
                        <view class="pic_lef_text">
                            <view class="pic_lef_top_txt">{{ detail.u_name || '' }}</view>
                            <view class="pic_lef_bot_txt">ID：{{ detail.form_give_user_id || '' }}</view>
                        </view>
                    </view>
                </view>
                <view class="two_box">
                    <view style=" width: 15%;font-size: 26rpx;font-weight: 500;color: #fff;">备&emsp;注：</view>
                    <view style=" width: 75%;font-size: 28rpx;font-weight: 500;color: #fff;">{{ detail.remark || '' }}
                    </view>
                </view>
            </view>
        </template>
        <template v-else>
        </template>
        <!-- 底部按钮 -->
        <view class="dibuanniu_box">
            <view class="wenzi_txtyfh" v-if="ydhType == 3 || yfhType == 1">- 大王赏潮玩 -</view>
            <view class="wenzi_txt" v-else>- 大王赏潮玩 -</view>
            <view class="button_big_box" v-if="ydhType == 0">
                <view class="duihuan_box" @tap="duihuanBtn" v-if="btnType.is_exchange_but == 1">拒提</view>
                <view class="zengsong_box" @tap="zengsongBtn" v-if="btnType.is_give_but == 1">赠送</view>
                <view class="fahuo_box" v-if="btnType.is_send_but == 1" @tap="fahuoBtn">提货</view>
                <view v-if="btnType.is_recovery_but == 1" class="fanhui_box" @tap="fanhuiBtn">反悔</view>
            </view>
            <view class="button_big_box" v-if="ydhType == 1">
            </view>
        </view>
        <!-- 上锁 -->
        <u-popup mode="center" v-model="shangsuoShow" border-radius="20">
            <view class="shengsuotanchuang">
                <view class="pop_title">是否将商品移入保险柜？</view>
                <view class="center_txt">移入后商品将不再过期，也不可操作
                    可进入保险柜解锁</view>
                <view class="bombtn flexs">
                    <view class="right_bom flexs" @click="shangsuoquxiao">
                        取消
                    </view>
                    <view class="left_bom flexs" @click="submitSuo">
                        确定
                    </view>
                </view>

            </view>
        </u-popup>
        <!-- 拒提 -->
        <u-popup mode="center" v-model="duihuanStatus" border-radius="20">
            <view class="fahuo_popop">
                <view class="pop_title">请确认拒提</view>

                <view class="bombtn flexs">
                    <view class="right_bom flexs" @click="duihuanquxiao">
                        取消
                    </view>
                    <view class="left_bom flexs" @click="submitDuihuan">
                        确定
                    </view>
                </view>
            </view>
        </u-popup>
        <!-- 赠送 -->
        <u-popup mode="center" v-model="zengsongStatus" border-radius="20">
            <view class="zengsong_popop">
                <view class="pop_title">赠送</view>
                <view class="zengsongsousuo">
                    <u-search v-model="searchValue" :showAction="true" placeholder="请输入用户id" @search="secBtn"
                        @custom="secBtn" actionText="搜索" shape="square"></u-search>
                    <!-- <u-input v-model="searchValue" type='search' placeholder='请输入id搜索' showAction='true' actionText="搜索" /> -->
                </view>
                <view class="duihuanpop_box">
                    <view class="bot_box" v-if="sousuoShow == 'ok'">
                        <view class="zhongjian_box">
                            <view class="left_box">
                                <image :src="userInfo.avatar" mode=""></image>
                            </view>
                            <view class="right_box">
                                <view class="one_txt">
                                    用户名称：{{ userInfo.nickname }}
                                </view>
                                <view class="two_txt">
                                    ID:{{ userInfo.id }}
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class=""
                    style="width: 288rpx;height: 26rpx;font-size: 18rpx;font-weight: 500;color: #FA2929;line-height: 26rpx;margin: 20rpx auto;">
                    温馨提示：商品赠送后不可撤销哦～
                </view>
                <view class="beizhu">
                    <textarea placeholder='赠礼留言:' height='280' :maxlength='120' v-model="textareaValue"
                        @blur="bindTextAreaBlur" :auto-height='false' />
                </view>
                <view class="bombtn flexs">
                    <view class="right_bom flexs" @click="zengsongquxiao">
                        取消
                    </view>
                    <view class="left_bom flexs" @click="submitZs">
                        确定
                    </view>
                </view>

            </view>
        </u-popup>
        <!-- 发货 -->
        <u-popup mode="center" v-model="fahuoStatus" border-radius="20">
            <view class="fahuo_popop">
                <view class="pop_title">请确认提货</view>

                <view class="bombtn flexs">
                    <view class="right_bom flexs" @click="fahuoquxiao">
                        取消
                    </view>
                    <view class="left_bom flexs" @click="submitFahuo">
                        确定
                    </view>
                </view>
            </view>
        </u-popup>
        <!-- 反悔 -->
        <u-popup mode="center" v-model="fanhuiStatus" border-radius="20">
            <view class="fahuo_popop">
                <view class="pop_title">请确认反悔</view>

                <view class="bombtn flexs">
                    <view class="right_bom flexs" @click="fanhuiquxiao">
                        取消
                    </view>
                    <view class="left_bom flexs" @click="submitFanhui">
                        确定
                    </view>
                </view>
            </view>
        </u-popup>
    </view>
</template>
<script>
export default {
    data() {
        return {
            orderId: '',//订单order_id
            cateType: '',//类型
            detail: {
                box_name: '',
                price: '',
                num: '',
                create_time: '',
                expire_time: '',
                recovery_price: '',
                order_id: '',
                remark: '',
                u_name: '',
                send_order: {},
                back_order: {}
            },
            shangsuoShow: false,//上锁框
            fahuoStatus: false,//发货框
            duihuanStatus: false,//拒提框
            zengsongStatus: false,//赠送框
            fanhuiStatus: false,//反悔框
            searchValue: '',//搜索框值
            textareaValue: '',//留言
            userInfo: {
                nickname: '',
                id: '',
            },
            sousuoShow: '',
            ydhType: '',//已拒提类型
            titleType: '',//待处理类型
            shouzengType: '',//受赠人
            isDuhuan: '',//是否显示可拒提和已拒提
            yfhType: '',//yfhType=1:发货样式
            btnType: {},//按钮状态
        }
    },
    onShow() {
        this.exchangeDetailed()
    },
    onHide() {

        this.fanhuiStatus = false
        this.shangsuoShow = false//上锁框
        this.fahuoStatus = false//发货框
        this.duihuanStatus = false//拒提框
        this.zengsongStatus = false//赠送框
    },
    onLoad(options) {
        ////console.log(options)
        this.orderId = options.orderId
        this.cateType = options.cate
        this.ydhType = options.ydhType
        this.titleType = options.titleType
        this.shouzengType = options.shouzengType
        this.isDuhuan = options.isDuhuan
        this.yfhType = options.yfhType//yfhType=1:发货样式
    },
    // 时间戳处理
    filters: {
        // 时间戳处理
        formatDate: function (value, spe = '/') {
            value = value * 1000
            let data = new Date(value);
            let year = data.getFullYear();
            let month = data.getMonth() + 1;
            let day = data.getDate();
            let h = data.getHours();
            let mm = data.getMinutes();
            let s = data.getSeconds();
            month = month >= 10 ? month : "0" + month;
            day = day >= 10 ? day : "0" + day;
            h = h >= 10 ? h : "0" + h;
            mm = mm >= 10 ? mm : "0" + mm;
            s = s >= 10 ? s : "0" + s;
            return `${year}${spe}${month}${spe}${day} ${h}:${mm}:${s}`;
        }
    },
    methods: {
        // 反悔按钮
        fanhuiBtn() {
            this.fanhuiStatus = true
        },
        //反悔取消
        fanhuiquxiao() {
            this.fanhuiStatus = false
        },
        // 反悔确认
        submitFanhui() {
            let data = {
                order_id: this.detail.order_id
            }
            
            this.$Request.post(this.$api.user.useBackCard, data).then(res => {
                uni.setStorageSync('cabShuaxin', 1)
                uni.navigateTo({
                    url: '/orderPage/index/back?box_id=' + res.data.box_id + '&order_id=' + res.data.order_id  + '&tenOpen=' + 1 + '&box_type=' + 0 + '&aaa=' + 0
                })
                uni.showToast({
                    title: res.msg,
                    icon: none
                })
            })
        },
        bindTextAreaBlur(e) {
            ////console.log(e)
        },
        // 上锁弹窗取消
        shangsuoquxiao() {
            this.shangsuoShow = false
        },
        // 上锁按钮
        shangsuo() {
            this.shangsuoShow = true
        },
        //上锁弹窗确定按钮
        submitSuo() {
            let orderId_arr = []
            orderId_arr.push(this.orderId)
            let data = {
                is_locking: 1,
                order_id: orderId_arr
            }
            this.$Request.post(this.$api.user.unlock, data).then(res => {
                uni.showToast({
                    title: res.msg,
                    icon: "none",
                })

                uni.setStorageSync('cabShuaxin', 1)
                this.shangsuoShow = false
                setTimeout(() => {
                    uni.switchTab({
                        url: '/pages/index/cabinetBox'
                    })
                }, 1000)

            })
        },
        // 发货弹窗取消
        fahuoquxiao() {
            this.fahuoStatus = false
        },
        // 发货按钮
        fahuoBtn() {
            this.fahuoStatus = true
        },
        // 发货按钮确认
        submitFahuo() {
            let order_idarr = []
            order_idarr.push(this.detail.order_id)
            uni.navigateTo({
                url: '/cabinetPages/index/index?list=' + JSON.stringify(order_idarr) + '&order_id=' +
                    order_idarr
            })
        },
        // 拒提弹窗取消
        duihuanquxiao() {
            this.duihuanStatus = false
        },
        // 拒提按钮
        duihuanBtn() {
            this.duihuanStatus = true
        },
        // 拒提按钮确认
        submitDuihuan() {
            let order_idarr = []
            order_idarr.push(this.detail.order_id)
            let data = {
                order_id: order_idarr
            }
            this.$Request.post(this.$api.order.exchange, data).then(res => {
                uni.setStorageSync('cabShuaxin', 1)
                this.duihuanStatus = false
                uni.showToast({
                    title: res.msg,
                    duration: 1500,
                    icon: "none"
                })
                setTimeout(() => {
                    uni.switchTab({
                        url: '/pages/index/cabinetBox'
                    })
                }, 1000)
            })
        },
        // 赠送弹窗取消
        zengsongquxiao() {
            this.zengsongStatus = false
        },
        // 赠送搜索
        secBtn() {
            let data = {
                user_id: this.searchValue,
            }
            this.$Request.get(this.$api.order.searchGiveUser, data).then(res => {
                uni.setStorageSync('cabShuaxin', 1)
                this.userInfo = res.data
                this.sousuoShow = res.msg
            })
        },
        // 赠送按钮
        zengsongBtn() {
            this.zengsongStatus = true
        },
        //赠送按钮确认
        submitZs() {
            let order_idarr = []
            order_idarr.push(this.detail.order_id)
            let data = {
                user_id: this.searchValue,
                order_id: order_idarr,
                remark: this.textareaValue
            }
            this.$Request.post(this.$api.order.sellSubmitzs, data).then(res => {
                uni.setStorageSync('cabShuaxin', 1)
                if (res.msg == "赠送成功~") {
                    this.zengsongStatus = false
                    this.textareaValue = ''
                    this.searchValue = ''
                    uni.showToast({
                        title: res.msg,
                        duration: 1500,
                        icon: "none"
                    })
                    setTimeout(() => {
                        uni.switchTab({
                            url: '/pages/index/cabinetBox'
                        })
                    }, 1000)

                }
            })
        },
        // 详情
        exchangeDetailed() {
            let data = {
                order_id: this.orderId
            }
            this.$Request.get(this.$api.order.shopDetail, data).then(res => {
                this.btnType = res.data.btn
                this.detail = res.data
            })
        }

    }
}
</script>
<style lang="scss" scoped>
.container {
    width: 100%;
    height: 100vh;
    background: #262626;
    padding-top: 20rpx;

    // 赠送弹窗
    .zengsong_popop {
        width: 640rpx;
        min-height: 364rpx;
        background: #ffffff;
        border-radius: 20rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        padding: 53rpx 0 67rpx 0;

        .input {
            width: 588rpx;
            height: 68rpx;
            background: #FFFFFF;
            border: 1px solid #BCBEBE;
            border-radius: 44rpx;
            padding: 0 20rpx;
            box-sizing: border-box;
            margin-top: 20rpx;
            display: flex;
            align-items: center;

            image {
                width: 48rpx;
                height: 48rpx;
            }

            input {
                padding-left: 20rpx;
            }
        }

        .pop_title {
            font-size: 36rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
            margin-bottom: 40rpx;
        }

        .zengsongsousuo {
            width: 60%;
            height: 60rpx;
            margin: auto;
        }

        .sec {
            margin: 0 auto;
            margin-top: 42rpx;
            padding-left: 36rpx;
            border: 1rpx solid #707070;
            width: 570rpx;
            height: 88rpx;
            background: #FFFFFF;
            border-radius: 20rpx;
        }

        .duihuanpop_box {
            width: 596rpx;
            // height: 172rpx;
            margin: auto;

            .bot_box {
                width: 98%;
                height: 100%;
                margin: auto;

                .zhongjian_box {
                    height: 178rpx;
                    width: 92%;
                    // background-color: #fff;
                    display: flex;
                    margin: auto;
                    // margin-top: 34rpx;
                    justify-content: space-between;
                    align-items: center;

                    .left_box {
                        width: 120rpx;
                        height: 120rpx;
                        border-radius: 50%;
                        // border-radius: 18rpx 18rpx 18rpx 18rpx;
                        // border: 2rpx solid #5191FF;

                        image {
                            width: 100%;
                            height: 100%;
                            border-radius: 50%;
                        }
                    }

                    .right_box {
                        width: 70%;
                        height: 62%;

                        .one_txt {
                            margin-top: 10rpx;
                            width: 350rpx;
                            height: 40rpx;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            font-size: 28rpx;
                            font-weight: 500;
                            color: black;
                            line-height: 40rpx;
                        }

                        .two_txt {
                            margin-top: 25rpx;
                            width: 100%;
                            height: 40rpx;
                            font-size: 28rpx;
                            font-weight: 500;
                            color: #FA2929;
                            line-height: 40rpx;
                        }
                    }
                }
            }
        }

        .beizhu {
            display: flex;
            align-items: center;
            margin-top: 20rpx;

            .text {
                font-size: 26rpx;
                font-weight: 500;
                color: #000000;
                flex-shrink: 0;
            }

            ::v-deep textarea {
                width: 512rpx;
                font-size: 22rpx;
                background: #F0F0F0;
                border-radius: 4rpx;
                margin: auto 12rpx;
                padding: 20rpx !important;
                // box-sizing: border-box;
            }
        }

        .bombtn {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;
            margin-top: 70rpx;

            .left_bom {
                width: 166rpx;
                height: 66rpx;
                border-radius: 10rpx 10rpx 10rpx 10rpx;
                opacity: 1;
                background: #FFB02E;
                font-size: 32rpx;
            }

            .right_bom {
                width: 166rpx;
                height: 66rpx;
                border-radius: 10rpx 10rpx 10rpx 10rpx;
                opacity: 1;
                border: 2rpx solid #FFB02E;
                color: #FFB02E;
                font-size: 32rpx;
            }
        }
    }

    // 发货弹窗
    .fahuo_popop {
        width: 640rpx;
        min-height: 364rpx;
        background: #474747;
        border-radius: 20rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        padding: 53rpx 0 67rpx 0;

        .pop_title {
            font-size: 36rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #fff;
            margin-bottom: 40rpx;
        }

        .bombtn {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;
            margin-top: 70rpx;

            .left_bom {
                width: 166rpx;
                height: 66rpx;
                border-radius: 10rpx 10rpx 10rpx 10rpx;
                opacity: 1;
                // background: #B06AFF;
                color: #FFAE2A;
                font-size: 32rpx;
            }

            .right_bom {
                width: 166rpx;
                height: 66rpx;
                border-radius: 10rpx 10rpx 10rpx 10rpx;
                opacity: 1;
                // border: 2rpx solid #B06AFF;
                // color: #B06AFF;
                color: #fff;
                font-size: 32rpx;
            }
        }

    }

    // 上锁弹窗
    .shengsuotanchuang {
        width: 640rpx;
        min-height: 364rpx;
        background: #474747;
        border-radius: 20rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        padding: 53rpx 0 67rpx 0;

        .pop_title {
            font-size: 36rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #fff;
            margin-bottom: 40rpx;
        }

        .center_txt {
            width: 70%;
            color: #fff;

        }

        .bombtn {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;
            margin-top: 70rpx;

            .left_bom {
                width: 166rpx;
                height: 66rpx;
                border-radius: 10rpx 10rpx 10rpx 10rpx;
                opacity: 1;
                // background: #B06AFF;
                color: #FFAE2A;
                font-size: 32rpx;
            }

            .right_bom {
                width: 166rpx;
                height: 66rpx;
                border-radius: 10rpx 10rpx 10rpx 10rpx;
                opacity: 1;
                color: #fff;
                font-size: 32rpx;
            }
        }
    }

    // 分类盒子
    .shangpinfenlei_box {
        width: 98%;
        height: 76rpx;
        line-height: 76rpx;
        line-height: 76rpx;
        margin: auto;
        margin-bottom: 20rpx;
        border-radius: 10rpx;
        padding-right: 24rpx;
        padding-left: 20rpx;
        background: rgba(255, 231, 192, 0.1);
        border: 1rpx solid #FED187;

        .shangpinfeilei_text {
            font-size: 28rpx;
            font-family: Source Han Sans CN-Regular, Source Han Sans CN;
            font-weight: 400;
            color: #fff;
        }



        .shangpinfeilei_name_text {
            float: right;
            font-size: 28rpx;
            font-family: Source Han Sans CN-Medium, Source Han Sans CN;
            font-weight: 600;
            color: #fff;
        }
    }

    .Fhshangpinfenlei_box {
        width: 98%;
        height: 152rpx;
        line-height: 76rpx;
        line-height: 76rpx;
        margin: auto;
        margin-bottom: 20rpx;
        border-radius: 10rpx;
        padding-right: 24rpx;
        padding-left: 20rpx;
        // background-color: #ffffff;
        background: rgba(255, 231, 192, 0.1);
        border: 1rpx solid #FED187;

        .shangpinfeilei_text {
            font-size: 28rpx;
            font-family: Source Han Sans CN-Regular, Source Han Sans CN;
            font-weight: 400;
            color: #fff;
        }



        .shangpinfeilei_name_text {
            float: right;
            font-size: 28rpx;
            font-family: Source Han Sans CN-Medium, Source Han Sans CN;
            font-weight: 600;
            color: #fff;
        }
    }

    .longzhuduihuan_box {
        width: 98%;
        height: 76rpx;
        line-height: 76rpx;
        line-height: 76rpx;
        margin: auto;
        margin-bottom: 20rpx;
        border-radius: 10rpx;
        padding-right: 24rpx;
        padding-left: 20rpx;
        background: rgba(255, 231, 192, 0.1);
        border: 1rpx solid #FED187;

        .shangpinfeilei_text {
            font-size: 28rpx;
            font-family: Source Han Sans CN-Regular, Source Han Sans CN;
            font-weight: 400;
            color: #fff;
        }



        .shangpinfeilei_name_text {
            float: right;
            font-size: 28rpx;
            font-family: Source Han Sans CN-Medium, Source Han Sans CN;
            font-weight: 600;
            color: #fff;
        }
    }

    .shouzeng_box {
        width: 98%;
        height: 362rpx;
        // background: #FFFFFF;
        border: 1rpx solid #FED187;
        background: rgba(255, 231, 192, 0.1);
        margin: auto;
        border-radius: 10rpx 10rpx 10rpx 10rpx;

        .one_box {
            width: 100%;
            height: 70rpx;
            padding-top: 16rpx;
            padding-left: 22rpx;
            line-height: 70rpx;
        }

        .shouzengren_box {
            width: 100%;
            height: 208rpx;

            .touxiang_box {
                width: 100%;
                height: 154rpx;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                padding-left: 30rpx;

                .pic_box {
                    width: 94rpx;
                    height: 94rpx;
                    border-radius: 50%;

                    image {
                        width: 100%;
                        height: 100%;
                        border-radius: 50%;
                    }
                }

                .pic_lef_text {
                    height: 100%;
                    padding-left: 28rpx;

                    .pic_lef_top_txt {
                        height: 50%;
                        font-size: 24rpx;
                        font-family: Source Han Sans CN-Medium, Source Han Sans CN;
                        font-weight: 500;
                        color: #fff;
                        line-height: 120rpx;
                    }

                    .pic_lef_bot_txt {

                        height: 50%;
                        line-height: 40rpx;
                        font-size: 24rpx;
                        font-family: Source Han Sans CN-Medium, Source Han Sans CN;
                        font-weight: 500;
                        color: #fff;
                    }
                }

            }
        }

        .two_box {
            width: 100%;
            height: 100%;
            padding-left: 22rpx;
            display: flex;
            justify-content: flex-start;
        }
    }


    // 详情盒子
    .boxDetail {
        width: 98%;
        // height: 508rpx;
        margin: auto;
        background: rgba(255, 231, 192, 0.1);
        border: 1rpx solid #FED187;
        border-radius: 14rpx;
        position: relative;
        margin-bottom: 20rpx;
        padding-bottom: 20rpx;

        .fanhuihd_box {
            width: 100%;
            height: 86rpx;
            line-height: 86rpx;
            padding-left: 20rpx;
            padding-right: 20rpx;

            .left_box {
                font-size: 28rpx;
                font-weight: 500;
                color: #fff;
            }

            .right_box {
                float: right;
                font-size: 24rpx;
                font-weight: 500;
                color: #fff;
            }
        }

        .shangsuoanniu_box {
            position: absolute;
            width: 34rpx;
            height: 44rpx;
            top: 23rpx;
            right: 40rpx;

            image {
                width: 100%;
                height: 100%;
            }
        }

        .top_box {
            width: 98%;
            height: 178rpx;
            margin: auto;
            // background-color: aqua;
            display: flex;
            justify-content: space-around;

            .left_box {
                width: 178rpx;
                height: 178rpx;
                border: 1rpx solid #FFB02E;
                border-radius: 18rpx;

                image {
                    width: 100%;
                    height: 100%;
                    border-radius: 18rpx;
                }

            }

            .right_box {
                width: 460rpx;
                height: 178rpx;
                // background-color: skyblue;

                .top_text_box {
                    width: 300rpx;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    height: 89rpx;
                    line-height: 89rpx;
                    font-size: 24rpx;
                    font-family: Source Han Sans CN-Medium, Source Han Sans CN;
                    font-weight: 500;
                    color: #fff;
                }

                .zuofei_box {
                    width: 90rpx;
                    height: 34rpx;
                    background: #FED187;
                    border-radius: 3rpx 3rpx 3rpx 3rpx;
                    opacity: 1;
                    font-size: 22rpx;
                    font-weight: 500;
                    color: #FFFFFF;
                    text-align: center;
                    line-height: 34rpx;
                }

                .bot_text_box {
                    height: 89rpx;
                    line-height: 89rpx;
                    font-size: 28rpx;
                    font-family: Source Han Sans CN-Medium, Source Han Sans CN;
                    font-weight: 500;
                    color: #FFAE2A;
                    padding-right: 20rpx;

                    .jiazhi_txt {}

                    .right_txt {
                        float: right;
                    }
                }
            }
        }

        .yunfei_big_box {
            width: 100%;
            height: 50rpx;

            .yunfei_sm_box {
                width: 68%;
                height: 100%;
                line-height: 50rpx;
                float: right;
                padding-right: 24rpx;

                .left_txt {
                    font-size: 28rpx;
                    font-family: Source Han Sans CN-Medium, Source Han Sans CN;
                    font-weight: 500;
                    color: #3D3D3D;
                }

                .right_box {
                    float: right;
                    font-size: 28rpx;
                    font-family: Source Han Sans CN-Medium, Source Han Sans CN;
                    font-weight: 500;
                    color: #3D3D3D;
                }
            }
        }

        .two_box {
            width: 94%;
            height: 32rpx;
            margin: auto;
            margin-top: 22rpx;
            margin-bottom: 26rpx;

            .sm_box {
                width: 296rpx;
                height: 32rpx;
                background: linear-gradient(270deg, #957AFF 0%, #FF78DE 100%);
                border-radius: 5rpx 5rpx 5rpx 5rpx;
                font-size: 20rpx;
                font-family: Source Han Sans CN-Medium, Source Han Sans CN;
                font-weight: 500;
                color: #FFFFFF;
                line-height: 32rpx;
                text-align: center;
            }
        }

        .bottom_box {
            height: 64rpx;
            line-height: 64rpx;
            width: 94%;
            border-bottom: 1rpx solid rgba(153, 153, 153, 0.2);
            margin: auto;

            .dingdanbainhao_name {
                color: #fff;
            }

            .dingdanbainhao {
                font-size: 24rpx;
                font-family: Source Han Sans CN-Regular, Source Han Sans CN;
                font-weight: 400;
                color: #fff;
            }

            .dingdanbainhao_txt {
                float: right;
                font-size: 24rpx;
                font-family: Source Han Sans CN-Medium, Source Han Sans CN;
                font-weight: 500;
                color: #fff;
            }


        }

        .bottom1_box {
            // height: 64rpx;
            // line-height: 64rpx;
            width: 94%;
            border-bottom: 1rpx solid rgba(153, 153, 153, 0.2);
            margin: auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            // background-color: #fff;

            .dingdanbainhao {
                width: 260rpx;
                font-size: 24rpx;
                font-family: Source Han Sans CN-Regular, Source Han Sans CN;
                font-weight: 400;
                color: #fff;
            }

            .dingdanbainhao_name {
                color: #fff;
            }

            .shouhuodizhi_box {
                width: 400rpx;
                display: inline-block;
                white-space: pre-wrap;
                word-wrap: break-word;
                text-align: right;
                font-size: 24rpx;
                font-family: Source Han Sans CN-Medium, Source Han Sans CN;
                font-weight: 500;
                color: #fff;
            }


        }

    }

    //发货详情
    .faHuoDetail {
        width: 98%;
        // height: 570rpx;
        margin: auto;
        background: rgba(255, 231, 192, 0.1);
        border: 1rpx solid #FED187;
        border-radius: 14rpx;
        position: relative;
        margin-bottom: 20rpx;
        padding-bottom: 20rpx;

        .fanhuihd_box {
            width: 100%;
            height: 86rpx;
            line-height: 86rpx;
            padding-left: 20rpx;
            padding-right: 20rpx;

            .left_box {
                font-size: 28rpx;
                font-weight: 500;
                color: #fff;
            }

            .right_box {
                float: right;
                font-size: 24rpx;
                font-weight: 500;
                color: #fff;
            }
        }

        .shangsuoanniu_box {
            position: absolute;
            width: 34rpx;
            height: 44rpx;
            top: 23rpx;
            right: 40rpx;

            image {
                width: 100%;
                height: 100%;
            }
        }

        .top_box {
            width: 98%;
            height: 178rpx;
            margin: auto;
            // background-color: aqua;
            display: flex;
            justify-content: space-around;

            .left_box {
                width: 178rpx;
                height: 178rpx;
                border: 1rpx solid #FED187;
                border-radius: 18rpx;

                image {
                    width: 100%;
                    height: 100%;
                    border-radius: 18rpx;
                }

            }

            .right_box {
                width: 460rpx;
                height: 178rpx;
                // background-color: skyblue;

                .top_text_box {
                    width: 300rpx;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    height: 89rpx;
                    line-height: 89rpx;
                    font-size: 24rpx;
                    font-family: Source Han Sans CN-Medium, Source Han Sans CN;
                    font-weight: 500;
                    color: #fff;
                }

                .zuofei_box {
                    width: 90rpx;
                    height: 34rpx;
                    background: #FED187;
                    border-radius: 3rpx 3rpx 3rpx 3rpx;
                    opacity: 1;
                    font-size: 22rpx;
                    font-weight: 500;
                    color: #FFFFFF;
                    text-align: center;
                    line-height: 34rpx;
                }

                .bot_text_box {
                    height: 89rpx;
                    line-height: 89rpx;
                    font-size: 28rpx;
                    font-family: Source Han Sans CN-Medium, Source Han Sans CN;
                    font-weight: 500;
                    color: #FFAE2A;
                    padding-right: 20rpx;

                    .jiazhi_txt {}

                    .right_txt {
                        float: right;
                    }
                }
            }
        }

        .yunfei_big_box {
            width: 100%;
            height: 50rpx;

            .yunfei_sm_box {
                width: 68%;
                height: 100%;
                line-height: 50rpx;
                float: right;
                padding-right: 24rpx;

                .left_txt {
                    font-size: 28rpx;
                    font-family: Source Han Sans CN-Medium, Source Han Sans CN;
                    font-weight: 500;
                    color: #3D3D3D;
                }

                .right_box {
                    float: right;
                    font-size: 28rpx;
                    font-family: Source Han Sans CN-Medium, Source Han Sans CN;
                    font-weight: 500;
                    color: #3D3D3D;
                }
            }
        }

        .two_box {
            width: 94%;
            height: 32rpx;
            margin: auto;
            margin-top: 22rpx;
            margin-bottom: 26rpx;

            .sm_box {
                width: 296rpx;
                height: 32rpx;
                background: linear-gradient(270deg, #957AFF 0%, #FF78DE 100%);
                border-radius: 5rpx 5rpx 5rpx 5rpx;
                font-size: 20rpx;
                font-family: Source Han Sans CN-Medium, Source Han Sans CN;
                font-weight: 500;
                color: #FFFFFF;
                line-height: 32rpx;
                text-align: center;
            }
        }

        .bottom_box {
            width: 94%;
            height: 64rpx;
            border-bottom: 1rpx solid rgba(153, 153, 153, 0.2);
            margin: auto;
            line-height: 64rpx;

            .dingdanbainhao_name {
                color: #fff;
            }

            .dingdanbainhao {
                font-size: 24rpx;
                font-family: Source Han Sans CN-Regular, Source Han Sans CN;
                font-weight: 400;
                color: #fff;
            }

            .dingdanbainhao_txt {
                float: right;
                font-size: 24rpx;
                font-family: Source Han Sans CN-Medium, Source Han Sans CN;
                font-weight: 500;
                color: #fff;
            }
        }

    }

    .dibuanniu_box {
        width: 100%;
        height: 306rpx;
        position: fixed;
        bottom: 0;

        .wenzi_txt {
            width: 100%;
            height: 40rpx;
            font-size: 28rpx;
            font-family: Source Han Sans CN-Medium, Source Han Sans CN;
            font-weight: 500;
            color: #999999;
            line-height: 40rpx;
            text-align: center;
            margin-bottom: 120rpx;
        }

        .wenzi_txtyfh {
            width: 100%;
            height: 200rpx;
            font-size: 28rpx;
            font-family: Source Han Sans CN-Medium, Source Han Sans CN;
            font-weight: 500;
            color: #999999;
            line-height: 200rpx;
            text-align: center;
            margin-bottom: 120rpx;
        }

        .button_big_box {
            width: 100%;
            height: 146rpx;
            display: flex;
            justify-content: space-around;
            align-items: center;

            .duihuan_box,
            .zengsong_box,
            .fahuo_box,
            .fanhui_box {
                width: 152rpx;
                height: 64rpx;
                // background: #B06AFF;
                border: 1rpx solid #FF9F00;
                border-radius: 60rpx;
                opacity: 1;
                text-align: center;
                font-size: 32rpx;
                font-family: Source Han Sans CN-Medium, Source Han Sans CN;
                font-weight: 500;
                color: #FFFFFF;
                line-height: 64rpx;
            }
        }
    }
}
</style>